<template>
  <div class="swiper-container" :ref="refName">
          <div class="swiper-wrapper">
            <div class="swiper-slide" 
            v-for="(banner) in list" 
            :key="banner.id">
              <img :src="banner.imgUrl"/>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
</template>

<script>
import swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css' 
export default {
    name:'Swiper',
    props:{
        list:{
            type:Array,
            required:true
        },
        refName:{
            type:String,
            default:'mySwiper'
        },
        options:{
            type:Object,
          default:()=>({ 
      // 循环模式选项
      loop: true, 
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      autoplay:{
         pauseOnMouseEnter:true,
         disableOnInteraction:false
      },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  }
            )
        }
    },
     watch:{
    list:{
      handler(nval,oval){
        if(nval && nval.length>0){
          this.$nextTick(()=>{
            this.initSwiper()
          })
        }
      },
      immediate:true
    }
  },
  methods:{
    initSwiper(){
      new swiper (this.$refs[this.refName],this.options)        

    }
  }
}
</script>

<style>

</style>